<template>
  <div class="my-serve-container">
    <!-- 用户信息部分 -->
    <div class="user-info">
      <div class="user-avatar">
        <img :src="userAvatar" alt="用户头像" />
      </div>
      <div class="user-details">
        <p class="user-name">{{ userData.realname }}</p>
        <p class="user-phone">手机号：{{ userData.phone }}</p>
        <p class="pda-version">PDA版本：{{ version }}</p>
      </div>
    </div>
    <!-- 我的服务部分 -->
    <div class="service-section">
      <div class="service-items">
        <div
          class="service-item"
          v-for="(item, index) in serviceList"
          :key="index"
          @click="handleNavigation(item.path, index)"
        >
          <div class="item-icon">
            <div class="icon-bg">
              <!-- 新增图标背景容器 -->
              <van-icon :name="item.icon" size="20" color="white" />
            </div>
            <p>{{ item.text }}</p>
          </div>
          <div class="item-arrow">
            <van-icon name="arrow" size="20" color="#ccc" />
          </div>
        </div>
      </div>
    </div>
    <x-dialog :show="showGX" style="width:100%">
      <div class="weui-dialog__hd showContent">
        <strong class="weui-dialog__title">更新提醒</strong>
      </div>
      <div class="weui-dialog__bd">
        <divider>同步刷新最新版本</divider>
      </div>
      <div class="weui-dialog__ft">
        <a
          class="weui-dialog__btn weui-dialog__btn_default"
          v-on:click="uploadConfirm()"
          >确定</a
        >
        <a
          class="weui-dialog__btn weui-dialog__btn_default"
          v-on:click="uploadCancel()"
          >取消</a
        >
      </div>
    </x-dialog>
    <x-dialog :show="dowload" style="width:100%">
      <div class="weui-dialog__bd">
        <divider>正在下载版本请稍候...</divider>
      </div>
    </x-dialog>
  </div>
</template>

<script>
import { showConfirmDialog } from "vant";
import setting from "@/setting";
export default {
  data() {
    return {
      userData: {},
      serviceList: [
        {
          icon: "user",
          text: "修改资料",
          path: "/userDetail"
        },
        {
          icon: "good-job",
          text: "退出登录"
        },
        {
          icon: "upgrade",
          text: "版本更新"
        }
      ],
      showGX: false,
      dowload: false,
      userAvatar: "",
      version: "0.0.0",
      currentVersion: "",
      versionInfo: {}
    };
  },
  mounted() {
    this.currentVersion = localStorage.getItem("version") || "0.0.0";
    this.getUserInfo();
    this.getVersion();
  },
  methods: {
    handleNavigation(path, index) {
      if (index == 1) {
        try {
          this.$dialog
            .confirm({
              title: "退出登录",
              message: "确定退出当前用户吗？",
              confirmButtonText: "确定",
              cancelButtonText: "取消"
            })
            .then(res => {
              this.clearStorage();
              this.$router.push("/login");
            });
        } catch (error) {
          console.log("取消退出登录");
        }
        return;
      }
      if (index == 2) {
        this.showGX = true;
        this.getVersion();
        return;
      }
      this.$router.push(path);
    },
    clearStorage() {
      localStorage.removeItem("token");
      localStorage.removeItem("account");
      localStorage.removeItem("password");
    },

    // 确认版本更新
    uploadConfirm() {
      if (this.version == this.currentVersion) {
        this.$toast("当前已经是最新版本");

        this.showGX = false;
        return;
      } else {
        this.showGX = false;
        this.dowload = true;
        var dtask = plus.downloader.createDownload(
          this.versionInfo.url,
          {},
          (d, status) => {
            if (status == 200) {
              // 下载成功，并安装
              localStorage.setItem("version", this.versionInfo.version);
              this.dowload = false;
              var path = d.filename;
              plus.runtime.install(
                path,
                {
                  force: false
                },
                function() {
                  plus.runtime.restart();
                },
                function(e) {}
              );
            } else {
              //下载失败
              this.$toast("安装失败...");
            }
          }
        );
        dtask.start();
        this.showGX = false;
      }

      // 开始下载最新版本 并进行安装
    },
    uploadCancel() {
      this.showGX = false;
    },

    // 获取版本信息 todo
    async getVersion() {
      this.baseService
        .get(
          "/user-center/sys/app/get_latest_version_for_download?appId=100003"
        )
        .then(res => {
          console.log("res-版本信息--->", res);
          this.versionInfo = res.result;
          this.version = res.result.version;
        });
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.baseService
        .get("/user-center/sys/user/queryById?id=" + userInfo.id)
        .then(res => {
          console.log('获取用户信息---->',res);
          console.log('setting.ctx---->',setting.ctx);
          this.userData = res.result;
          this.userAvatar = setting.ctx + '/user-center/sys/common/static/' + res.result.avatar;
          // this.userAvatar =  res.result.avatar;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.my-serve-container {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .user-avatar {
    width: 100px;
    height: 100px;
    margin-right: 20px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .user-details {
    p {
      margin: 5px 0;
      font-size: 14px;
      color: #aaa;
      font-weight: 600;
    }

    .user-name {
      color: #333;
      font-size: 24px;
    }
  }

  .service-section {
    background-color: rgb(219, 234, 254);
    border-radius: 10px;
    padding-bottom: 10px;
    // padding: 20px;
  }

  .service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #fff solid;
    p {
      font-size: 15px;
      font-weight: bold;
      color: #333;
      padding: 10px;
    }
    .logout {
      margin-right: 20px;
      font-size: 12px;
      color: #2472c8;
    }
  }

  .service-items {
    display: flex;
    flex-direction: column;
    // gap: 15px;
  }

  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px;
    padding: 10px 0;
    // border-radius: 5px;
    border-bottom: 1px rgba(179, 179, 179, 0.9) solid;
    cursor: pointer;

    &:hover {
      background-color: #e6ecf9;
    }
  }

  // 修改后的样式
  .item-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; // 图标与文字间距

    .icon-bg {
      width: 35px;
      height: 35px;
      background-color: rgb(179, 179, 179);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    p {
      margin: 0;
      font-size: 13px;
      color: #555;
      font-weight: bold;
    }
  }

  .item-arrow {
    display: flex; // 确保容器使用flex布局
    align-items: center; // 垂直居中
    margin-left: auto; // 推至最右侧
    padding-left: 20px; // 右侧留出空间
  }
}

// 修改后的变量定义
@header-title-color: black;
@header-background-color: #fff;
@tab-text-active-color: #dc143c;
@tab-bar-active-color: #dc143c;
</style>
